button {
	background: none;
	border: none;
	z-index:99999;
}
button::-moz-focus-inner {
	border: 0;
}
:focus { 
	outline: none; 
}
::-moz-focus-inner {
	border: 0;
}
.btn-nav:hover { 
	cursor: pointer; 
}
.btn-nav:hover .bar {
	background: #FFF; 
}
.bar {
	display: block;
	height: 5px;
	width: 50px;
	background: #FFFFFF;
	margin: 10px 0 10px -5px;
}
.btn-nav {
    display: block;
    padding: 0 8px;
    width: 60px;
    position: fixed;
    left: 20px;
    margin: 15px auto 0;
    border: 2px solid rgba(255, 255, 255, 0.33);
    background-color: rgba(0, 0, 0, 0.46);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.btn-nav:focus { 
	outline: none; 
}
.middle { 
	margin: 0 auto; 
}
.bar {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-ms-transition: all .7s ease;
	-o-transition: all .7s ease;
	transition: all .7s ease;
}
.animated { 
	z-index: 999; 
}
.animated .arrow-top-r {
	-webkit-transform: rotateZ(-45deg) translateY(11px);
	-moz-transform: rotateZ(-45deg) translateY(11px);
	-ms-transform: rotateZ(-45deg) translateY(11px);
	-o-transform: rotateZ(-45deg) translateY(11px);
	transform: rotateZ(-45deg) translateY(11px);
	width: 25px;
    margin-left: -17px;
}
.animated .arrow-middle-r {
	-webkit-transform: translateX(25px);
	-moz-transform: translateX(25px);
	-ms-transform: translateX(25px);
	-o-transform: translateX(25px);
	transform: translateX(25px);
	margin: 10px 0 10px -30px;
}
.animated .arrow-bottom-r {
	-webkit-transform: rotateZ(45deg) translateY(-11px);
	-moz-transform: rotateZ(45deg) translateY(-11px);
	-ms-transform: rotateZ(45deg) translateY(-11px);
	-o-transform: rotateZ(45deg) translateY(-11px);
	transform: rotateZ(45deg) translateY(-11px);
	width: 25px;
    margin-left: -17px;
}
.nav-container {
	position: absolute;
	left: -50%;
	top: 0;
	height: 100%;
	width: 100px;
    background-color: rgba(0, 0, 0, 0.49);
}
.nav-list {
	cursor: pointer;
	list-style-type: none;
	top: 50%;
	text-align: center;
	position: relative;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.list-item {
    margin: 15px auto;
    border: 2px solid #fff;
    width: 60px;
    padding: 10px 5px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.list-item:hover {
	border: 2px solid #009688;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.list-item:hover .fa {
	color: #17BEBB;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.list-item a {
	color: #fff;
	font-size: 1.7em;
	display: block;
	width: 100%;
}
.fa {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
@keyframes 
showNav { from {
	left: -100%;
}
to { left: 0; }
}
@-webkit-keyframes 
showNav { from {
	left: -100%;
}
to { left: 0; }
}
@-moz-keyframes 
showNav { from {
	left: -100%;
}
to { left: 0; }
}
@-o-keyframes 
showNav { from {
	left: -100%;
}
to { left: 0; }
}
.showNav {
	-webkit-animation: showNav .5s ease forwards;
	-moz-animation: showNav 1s ease forwards;
	-o-animation: showNav 1s ease forwards;
	animation: showNav .5s ease forwards;
	position:fixed;
	z-index:99;
}
@keyframes 
hideNav { from {
	left: 0;
}
to { left: -100%; }
}
@-webkit-keyframes 
hideNav { from {
	left: 0;
}
to { left: -100%; }
}
@-moz-keyframes 
hideNav { from {
	left: 0;
}
to { left: -100%; }
}
@-o-keyframes 
hideNav { from {
	left: 0;
}
to { left: -100%; }
}
.hideNav {
	-webkit-animation: hideNav 1s ease forwards;
	-moz-animation: hideNav 1s ease forwards;
	-o-animation: hideNav 1s ease forwards;
	animation: hideNav 1s ease forwards;
	position:fixed;
}
.hidden {
	display: none;
}
.jquery-script-ads {
	position:absolute;
	top:350px;
	left:250px;
}

@media screen and (max-width: 853px) {
	.nav-list {
		top: 54%;
	}
}

@media screen and (max-width: 768px) {
	.nav-list {
		top: 31%;
	}
}

@media screen and (max-width: 736px) {
	.nav-list {
		top: 55%;
	}
	.list-item {
		margin: 10px auto;
		width: 40px;
		padding: 5px 5px;
	}
	.list-item a {
		color: #fff;
		font-size: 16px;
	}
	.btn-nav {
		padding: 0 8px;
		width: 50px;
		left: 25px;
		margin: 5px auto 0;
	}
	.bar {
		width: 40px;
		margin: 5px 0 5px -5px;
	}
}

@media screen and (max-width:667px) {
	.nav-container {
		width: 150px;
		background-color: rgba(0, 0, 0, 0.73);
	}
	.list-item {
		margin: 10px;
	}
	.nav-list {
		top: 41.5%;
		left: 53%;
	}
}

@media screen and (max-width:640px) {
	.nav-container {
		width: 100px;
	}
	.nav-list {
		top: 54.5%;
		left: 20%;
	}
	.list-item {
		margin: 10px;
		width: 40px;
		padding: 5px 5px;
	}
}

@media screen and (max-width:603px) {
	.nav-list {
		top: 25%;
		left: 15%;
	}
	.list-item {
		margin: 10px;
		width: 50px;
		padding: 10px 5px;
	}
}

@media screen and (max-width:568px) {
	.nav-container {
		width: 150px;
	}
	.nav-list {
		top: 47%;
		left: 57%;
	}
	.list-item {
		margin: 5px;
		width: 40px;
		padding: 5px 5px;
	}
}

@media screen and (max-width:533px) {
	.nav-container {
		width: 100px;
	}
	.nav-list {
		top: 30%;
		left: 15%;
	}
	.list-item {
		margin: 10px;
		width: 50px;
		padding: 10px 5px;
	}
}

@media screen and (max-width:480px) {	
	.nav-container {
		width: 100px;
	}
	.nav-list {
		top: 57%;
		left: 25%;
	}
	.list-item {
		margin: 5px;
		width: 40px;
		padding: 5px 5px;
	}
}

@media screen and (max-width:414px) {
	.nav-list {
		top: 35%;
		left: 15%;
	}
	.list-item {
		margin: 10px;
		width: 50px;
		padding: 10px 5px;
	}
}

@media screen and (max-width:384px) {
	.nav-list {
		top: 40%;
	}
}

@media screen and (max-width:320px) {
	.nav-list {
		top: 50%;
	}
}